<template>
  <Dialog 
    :visible="addDialogVisible"     
    :destroy-on-close="true"
    @close="hangleCloseAddDialog" 
    width="40%" 
    title="新增活动"
  >
    <el-form :model="form" :rules="rules" label-position="top" ref="formRef" class="myform">
      <div class="input-group">
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="form.activityName"></el-input>
        </el-form-item>

        <el-form-item label="举办社团" prop="organization">
          <el-select v-model="form.organization" placeholder="请选择举办社团">
            <OrganizationOption></OrganizationOption>
          </el-select>
        </el-form-item>
      </div>

      <div class="input-group">
        <el-form-item label="活动时间" prop="activityTime">
          <el-date-picker v-model="form.activityTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择活动时间" />
        </el-form-item>
      </div>

      <el-form-item label="活动简介" prop="activityIntro">
            <el-input type="textarea" v-model="form.activityIntro"></el-input>
        </el-form-item>

      <div class="upload-group">
        <el-form-item label="活动照片" prop="photos">
          <el-scrollbar max-height="240px">
            <Upload :fileList="form.photos" @change="handlePhotoChange" @delete="handlePhotoDelete">
            </Upload>
          </el-scrollbar>
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hangleCloseAddDialog">取消</el-button>
        <el-button type="primary" @click="hangleConfirm">确认</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref
  } from "vue";
  import type {
    ElMessage,
    UploadFile,
    UploadFiles,
    FormInstance,
    FormRules
} from 'element-plus'

import { throttle } from "lodash";

  import Upload from "../components/Upload.vue";
  import OrganizationOption from "@/components/common/OrganizationOption.vue";
  import Dialog from '@/components/common/Dialog.vue';

  import {
    options
  } from "@/data/select.ts";

  import {
    addActivity
  } from "@/api/activity/index.ts";

  const props = defineProps(["addDialogVisible"]);
  const emits = defineEmits(["closeAddDialog", "confirm"]);

  const formRef = ref < FormInstance > ()

  const rules = reactive < FormRules > ({
    activityName: [{
      required: true,
      message: '请输入活动名称',
      trigger: 'change',
    }],
    organization: [{
      required: true,
      message: '请选择举办社团',
      trigger: 'change',
    }],
    activityTime: [{
      required: true,
      message: '请选择活动时间',
      trigger: 'change',
    }],
    activityIntro: [{
      required: true,
      message: '请输入活动简介',
      trigger: 'input',
    }],
  });

  const form = reactive({
    activityName: "",
    activityIntro: "",
    activityTime: "",
    organization: "",
    photos: [],
  });

  const hangleCloseAddDialog = () => {
    emits("closeAddDialog");
  };

  //
  function initForm() {
    form.activityName = "";
    form.activityIntro = "";
    form.activityTime = "";
    form.organization = "";
    form.photos = [];
  }

  // 活动照片
  const handlePhotoChange = (files: UploadFiles) => {
    form.photos = files as never;
  };

  const handlePhotoDelete = (file: UploadFile) => {
    form.photos = form.photos.filter(
      (item) => (item as UploadFile).uid != file.uid
    );
  };

  // 确定新增
  const hangleConfirm = throttle(async () => {
    if (formRef.value) {
      await (formRef.value as FormInstance).validate(async (valid: boolean, fields) => {

        if (valid) {

          const formData = new FormData();

          form.photos.forEach((file: UploadFile) => {
            console.log(file.raw);
            formData.append("photo", file.raw as Blob);
          });

          hangleCloseAddDialog();

          const {
            data: res
          } = await addActivity({
              name: form.activityName,
              intro: form.activityIntro,
              time: form.activityTime,
              organization: form.organization,
            },
            formData
          );

          if (res.code === 200) {
            // initForm();

            emits("confirm");
            // initForm();
          }
        } else {
          console.log(fields);
        }
      })
    }
  }, 500);
</script>

<style lang="less" scoped>
  .myform {
    padding: 0 20px;

    :deep(.el-select) {
      width: 100%;
    }

    :deep(.el-textarea__inner) {
      height: 100px;
      resize: none;
    }

    .input-group {
      width: 100%;
      display: flex;
      justify-content: space-between;

      :deep(.el-form-item) {
        width: 44%;
        margin-bottom: 12px;
      }
    }

    .upload-group {
      width: 100%;
      display: flex;
      justify-content: space-between;

      :deep(.el-form-item) {
        // width: 44%;
        margin-bottom: 12px;
      }
    }
  }
</style>